<template>
  <div id="login">
    <div class="loginFormWrap">
    <el-row>
      <el-col :span="24">
        <div class="title m-t-20">用户登录</div>
      </el-col>
    </el-row>
    <el-row>
     <el-col :span="24">
      <el-tabs v-model="loginData.activeName" stretch class="demo-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="密码登录" name="pwd">
          <el-form class="loginForm" :model="loginData" ref="loginForm" :rules="loginFormRules" label-width="0px" :inline="false" size="default">
            <!-- 账号 -->
            <el-form-item prop="admin_account">
              <el-input 
              class="input username m-b-20" 
              style="width: 20rem;" 
              prefix-icon="User" 
              v-model="loginData.admin_account" 
              type="text" 
              autocomplete="off" 
              placeholder="请输入账号" />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="admin_password">
              <el-input
                v-model="loginData.admin_password"
                type="password"
                prefix-icon="Lock"
                class="input admin_password m-b-20"
                style="width: 20rem;;"
                autocomplete="off"
                placeholder="请输入密码"
              />
            </el-form-item>

            <el-form-item>
              <el-button class="input submit m-b-20" type="primary" @click="onSubmit(loginForm, 'pwd')" style="width: 20rem;">登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button :link="true" class="forget">忘记密码？</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="验证码登录" name="code">
          <el-form class="loginForm" :model="loginData" ref="loginForm" :rules="loginFormRules" label-width="0px" :inline="false" size="default">
            <!-- 账号 -->
            <el-form-item prop="admin_account">
              <el-input 
              class="input username m-b-20" 
              style="width: 20rem;" 
              prefix-icon="User" 
              v-model="loginData.admin_account" 
              type="text" 
              autocomplete="off" 
              placeholder="请输入账号" />
            </el-form-item>

            <!-- TODO验证码 -->
            <el-form-item prop="code">
              <el-input v-model="loginData.code"  class="input code m-b-20" prefix-icon="Message" type="text" autocomplete="off" placeholder="验证码" />
              <el-button plain size="default" class="sm p-16 p-t-17 m-l-18 m-b-20" @click="sendCodeHandle">获取验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="input submit m-b-20" type="primary" @click="onSubmit(loginForm, 'code')" style="width: 20rem;">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      </el-col>
      </el-row>
    </div>

    
  </div>
</template>

<script lang="ts" setup>
import { codeLogin, login, sendCode } from '@/http/api/login/login';
import { useUserStore } from '@/store';
import { ElMessage, FormInstance } from 'element-plus';
import { inject, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
// import { sendCode } from '@/http/api/login/login'

const user = useUserStore()
const router = useRouter()
const loginForm = ref<FormInstance>()
const loginData = reactive({
  admin_account: '15374345877',
  admin_password: '1234567',
  code: '',
  activeName: 'pwd'
})
const clearData = inject('clearData')
const loginFormRules = reactive({
    admin_account: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    admin_password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    code: [
      { require: true, message: '请输入验证码', trigger: 'blur' },
    ]
  })

  // 切换登录方式，表单清空
const handleTabClick = () => {
    loginForm.value?.resetFields()
    // Fix: 密码无法清空
    loginData.admin_password = ''
}
  // 发送验证码
const sendCodeHandle = () => {
  if(!loginData.admin_account) return ElMessage.warning('请先输入手机号')
  sendCode({admin_account: loginData.admin_account})
}

const onSubmit = async (formRef: FormInstance | undefined, method: string) => {
  // console.log('formRef', formRef)
  if(!formRef) return 
  await formRef.validate(async (valid) => {
    if (valid) {
      let data: any = {
        admin_account: loginData.admin_account,
      }
      let result: any = {}
      // 密码登录
      if (method === 'pwd') {
        data.admin_password = loginData.admin_password
        result = await login(data)
        // console.log('result', result)
        // 验证码登录
      } else if (method === 'code') {
        data.code = loginData.code
        result = await codeLogin(data)
      }
      if(result.code === 200) {
        user.setToken(result.data.accessToken)
        router.push('/')
      }
    }
  })
}
onMounted(() => {
  clearData()
})
</script>

<style lang="scss" scoped>
@import "@/assets/style/index.scss";
#login {
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  background: url('@/assets/images/login.png') no-repeat;
  background-size: 100% 100%;

  .loginFormWrap {
    width: 30%;
    height: 100%;
    position: absolute;
    right: 12.5rem;
    top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    
    .title {
      color: $blue;
      font-size: $h1-font-size;
    }

    .input {
        height: 2.5rem;
        width: 18rem;

      &.code {
        width: 12rem;
      }

      &.submit {
        background-color: $blue;
      }
    }
  }
}
</style>